<script setup lang="ts">
import {PropType} from "vue";
import day from "@/utils/dateUtils.ts";
import BlogTag from "@/components/BlogTag.vue";
import SvgIcon from "@/components/common/SvgIcon.vue";

defineProps({
  article: {
    type: Object as PropType<Article>,
    default: () => {
      return {
        id: 1,
        title: "Docker入门",
        userId: 1,
        imgUrl: "https://img.mikufufu.com/image/card.webp",
        articleOverview: "1.docker概述1.1基本介绍Docker是一个开源的应用容器引擎，基于G0语言并遵从che2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，\r\n          然后发布到任何流行的Liuⅸ机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口，更重要的是...",
        articleContent: "1.docker概述1.1基本介绍Docker是一个开源的应用容器引擎，基于G0语言并遵从che2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，\r\n          然后发布到任何流行的Liuⅸ机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口，更重要的是...",
        publishDate: "2024-06-26 16:00:00",
        categoryName: "后端技术",
        categoryIcon: "code",
        iconColor: "#165DFF",
        userAvatar: "https://img.mikufufu.com/image/avatar.jpg",
        userName: "超级管理员",
        tagNames: [
          "学习笔记",
          "Java"
        ]
      } as Article
    }
  }
})
</script>

<template>
  <div class="article-card">
    <div class="article-card-cover">
      <img v-lazy="article.imgUrl" alt="">
      <BlogTag class="article-card-category" :icon="article.categoryIcon" :text="article.categoryName" :color="article.iconColor"/>
    </div>
    <div class="article-card-content">
      <div class="article-card-title" @click="$router.push(`/article/info/${article.id}`)">
        {{ article.title }}
      </div>
      <div class="article-card-desc">
        {{ article.articleOverview }}
      </div>
      <div class="article-card-tag">
        <BlogTag v-if="article.tagNames.length > 0" v-for="(tag,index) in article.tagNames" :key="index" :text="tag" transparent font-size="12px"/>
        <BlogTag v-else transparent font-size="12px"/>
      </div>
      <div class="article-card-footer">
        <div class="article-card-author">
          <img v-lazy="article.userAvatar" alt="">
          <div class="article-card-author-name">
            {{ article.userName }}
          </div>
        </div>
        <div class="article-card-footer-right">
          <div>
            <SvgIcon class-name="icon" icon-class="clock"/>
            {{ day(article.publishDate).fromNow() }}
          </div>
          <div>
            <SvgIcon class-name="icon" icon-class="查看"/>
            99+
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.article-card {
  width: 310px;
  height: 400px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
  //position: relative;
  &:hover{
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.35s ease;
    .article-card-cover{
      img{
        transition: all 0.35s ease; /* 添加过渡效果 */
        filter: brightness(0.8);
        transform: scale(1.05);
      }
    }
  }
}
.article-card-cover{
  position: relative; // 设置元素的定位为相对定位
  z-index: 1;
  overflow: hidden;
  img{
    width: 310px;
    height: 240px;
    object-fit: cover;
    object-position: 0 25%;
  }
  .article-card-category{
    position: absolute;
    top: 12px;
    right: 12px;
  }
  &::after{
    z-index: 5; /* 设置元素的堆叠顺序为5 */
    content: '';
    position: absolute; /* 设置元素的定位为绝对定位 */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  }
}
.article-card-content{
  width: 310px;
  padding: 20px;
  box-sizing: border-box;   /* 防止宽度包含边框或内边距 */
  display: grid;
  gap: 5px;
  .article-card-title{
    color: #333333;
    font-weight: bold;
    font-size: 20px;
    line-height: 29px;
    white-space: nowrap;      /* 确保文本不换行 */
    overflow: hidden;         /* 超出容器部分隐藏 */
    text-overflow: ellipsis;  /* 超出部分显示省略号 */
    &:hover {
      color: #EB5C88;
      cursor: pointer;
      transition: color 0.35s ease;
    }
  }
  .article-card-desc{
    color: #666666;
    white-space: nowrap;      /* 确保文本不换行 */
    overflow: hidden;         /* 超出容器部分隐藏 */
    text-overflow: ellipsis;  /* 超出部分显示省略号 */
    font-size: 14px;
    line-height: 20px;
    min-height: 20px;
  }
  .article-card-tag{
    display: flex;
    align-items: center;
    .tag {
      margin-right: 8px;
    }
  }
  .article-card-footer {
    display: flex;
    justify-content: space-between;
    //position: absolute;
    //bottom: 20px;
    .article-card-author {
      display: flex;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }
      .article-card-author-name {
        margin-left: 8px;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        color: #333333;
      }
    }
    .article-card-footer-right{
      display: flex;
      &>div{
        font-size: 14px;
        line-height: 28px;
        color: #666666;
        display: flex;
        align-items: center;
        margin-left: 12px;
        .icon{
          width: 16px;
          height: 16px;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
